<template>
  <zm-view ref="view" background="#fff">
    <view class="solid-2 radius-16 px-20 m-24 flex flex-col bg-white">
      <u-form ref="form" :model="form" :rules="rules" border-bottom :label-style="labelStyle" label-width="196rpx">
        <u-form-item label="证件类型" border-bottom>
          <text>二代身份证</text>
        </u-form-item>
        <u-form-item prop="realName" label="真实姓名" border-bottom>
          <u-input v-model="form.realName" placeholder="请输入观影人姓名" font-size="30rpx" border="none" clearable></u-input>
        </u-form-item>
        <u-form-item prop="idCardNo" label="证件号码">
          <u-input v-model="form.idCardNo" placeholder="请输入证件号码" font-size="30rpx" border="none" clearable></u-input>
        </u-form-item>
      </u-form>
    </view>

    <zm-footer background="#fff">
      <view class="p-24">
        <zm-button size="large" round :disabled="isDisabled" @click="onClickSubmit">{{ type == "edit" ? "编辑观影人" : "添加观影人" }}</zm-button>
      </view>
    </zm-footer>
  </zm-view>
</template>
<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  name: "coupons",
  components: {},
  mixins: [hook, page],
  data() {
    return {
      type: "",
      form: {
        realName: "",
        idCardNo: "",
        realNameId: ""
      },
      rules: {
        realName: [
          {
            required: true,
            message: "请输入观影人姓名",
            trigger: ["blur", "change"]
          },
          {
            max: 10,
            message: "观影人姓名不超过10个字",
            trigger: ["blur", "change"]
          }
        ],
        idCardNo: [
          {
            required: true,
            message: "请输入证件号码",
            trigger: ["blur", "change"]
          },
          {
            pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            message: "证件号码格式错误,请重新输入",
            trigger: ["blur", "change"]
          }
        ]
      }
    }
  },
  computed: {
    isDisabled() {
      return !this.form.realName || !this.form.idCardNo
    },
    labelStyle() {
      const style = {}
      style.color = "#999999"
      style.fontSize = "30rpx"
      style.fontWeight = "500"
      return style
    }
  },
  onLoad(options) {
    this.type = options.type
    if (this.type == "edit") {
      const cache = uni.$getCache("edit-viewer")
      this.form.realName = cache?.realName
      this.form.realNameId = cache?.realNameId
    }
  },
  methods: {
    onClickSubmit() {
      this.$refs.form.validate().then(async () => {
        await uni.$api.user.saveRealName(this.form)
        uni.$toast({
          type: "success",
          content: this.type == "edit" ? "编辑成功" : "添加成功"
        })
        setTimeout(() => uni.navigateBack(), 1500)
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .u-form-item__body {
  padding: 26rpx 0 !important;
}
::v-deep .u-line {
  border-color: #eeeeee !important;
}
</style>
